html {
  font-size: 15px;
}
body {
  width: 100vw;
  height: 100vh;
  display: grid;
  justify-content: center;
  align-content: center;
  background-color: #2c3e50;
}

article {
  width: 400px;
  height: 400px;
  border: solid 2px #000;
  overflow: hidden;
  perspective: 900px;
  box-shadow: 0 0 10px rgba(#000000, 1);
  section {
    display: grid;
    grid-template-rows: repeat(2, 400px);
    transform: translateY(-50%);
    transition-duration: 1s;
    cursor: pointer;
    .title {
      display: grid;
      grid-template-rows: repeat(2, 1fr);
      h3,
      p {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      h3 {
        font-size: 2rem;
        color: white;
        background-color: #34495e;
      }
      p {
        background-color: #16a085;
      }
    }
  }
  &:hover {
    section {
      transform: translateY(0) rotateX(360deg);
    }
  }
}
